<template>
  <el-row id="home" type="flex" justify="center">
    <el-col :xs="24" :sm="20" :md="16" :lg="15" :xl="15" style="margin: 10px;">
      <el-row class="title hidden-xs-only" type="flex" justify="start">
        主页
      </el-row>
      <el-row type="flex" align="middle" class="hidden-xs-only">
        <div class="divider"></div>
      </el-row>
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <el-row id="addBar" type="flex" align="middle" justify="center">
              <i class="el-icon-plus"></i>
              新建Listener
            </el-row>
          </template>
          <el-row id="newListenerBar" :gutter="10">
            <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="m">
              <el-input v-model="newListener.LiveURL">
                <template slot="prepend">地址</template>
              </el-input>
            </el-col>
            <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="m">
              <el-input v-model="newListener.Name">
                <template slot="prepend">备注</template>
              </el-input>
            </el-col>
            <el-col :span="2" class="m"><el-button type="primary" @click="addNewListener">添加</el-button></el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <el-table
        :data="tableData"
        style="width: 100%;"
        class="hidden-sm-and-down"
      >
        <el-table-column prop="Name" label="监听器" min-width="400">
          <template slot-scope="scope">
            <el-row style="margin: 0;"><strong>{{ scope.row.Name }}</strong></el-row>
            <el-row style="margin: 0;"><el-link><small>{{ scope.row.LiveURL }}</small></el-link></el-row>
          </template>
        </el-table-column>
        <el-table-column label="平台">
          <template slot-scope="scope">
            {{ scope.row.Platform }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-row type="flex" align="middle" style="margin: 0;">
              <i 
                style="font-size: 1.5rem; margin-right: 10px;" 
                :class="scope.row.Status ? 'el-icon-video-play' : 'el-icon-video-pause'"
                :style="scope.row.Status ? 'color: #67C23A' : 'color: #F56C6C'"
              ></i>
                {{ scope.row.Status ? '正在运行' : '停止' }}
            </el-row>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <i class="el-icon-more el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <i 
                    class="el-icon-switch-button"
                    style="color: #67C23A"
                  ></i>
                  {{ scope.row.Status ? '启动' : '关闭' }}
                </el-dropdown-item>
                <el-dropdown-item>
                  <i 
                    class="el-icon-refresh-right"
                    style="color: #E6A23C"
                  ></i>
                  重启
                </el-dropdown-item>
                <el-dropdown-item>
                  <i
                    class="el-icon-delete"
                    style="color: #F56C6C"
                  ></i>
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="hidden-md-and-up">
      <items
        v-for="i in tableData"
        :key="i.LiveURL"
        :title="i.LiveURL"
        :name="i.Name"
        :platform="i.Platform"
        :status="i.Status"
      ></items>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import Items from "./Items";
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      value: true,
      newListener: {
        LiveURL: "",
        Name: "",
      },
    };
  },
  components: {
    Items,
  },
  methods: {
    addNewListener() {
      let reg = /http[s]?:\/\/([a-zA-Z0-9]+)\.([a-zA-Z0-9]+)\.?([a-zA-Z0-9]+)?/.exec(this.newListener.LiveURL);
      console.log(reg);
      let platform = reg[2];
      axios
        .get("/api/listener", {
          params: {
            control: "add",
            LiveURL: this.newListener.LiveURL,
            Name: this.newListener.Name,
            Platform: platform
          },
        })
        .then((res) => {
          if (res.data.status) {
            this.$notify.success({
              title: "成功",
              message: res.data.msg,
            });

            this.tableData.push({
              LiveURL: this.newListener.LiveURL,
              Name: this.newListener.Name,
              Platform: platform,
              Status: 0
            })
          }
        });
    },
  },
  created() {
    axios
      .get("/api/listenerInfo")
      .then((res) => {
        this.tableData = res.data;
      })
      .catch((error) => {
        this.$notify.error({
          title: "获取信息错误",
          message: error,
        });
      });

    console.log(this.$router.name);
  },
};
</script>

<style scoped>
#home {
  height: 100%;
}

.display-inline {
  display: inline;
}

@font-face {
  font-family: 'iconfont';  /* project id 2323334 */
  src: url('//at.alicdn.com/t/font_2323334_24rndicc7mi.eot');
  src: url('//at.alicdn.com/t/font_2323334_24rndicc7mi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2323334_24rndicc7mi.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2323334_24rndicc7mi.woff') format('woff'),
  url('//at.alicdn.com/t/font_2323334_24rndicc7mi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2323334_24rndicc7mi.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 0.3rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.text-green {
  color: #67c23a;
}
.text-red {
  color: #f56c6c;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}
.row-bg {
  padding: 10px 0;
  background-color: #cde5fe;
}

.el-icon-circle-plus-outline {
  font-size: 3rem;
  color: rgb(112, 112, 112);
  margin: 0 1rem 0 1rem;
}

.title {
  font-size: 2.5rem;
}

.divider {
  width: 100%;
  border: solid 1px rgb(196, 196, 196);
  margin: 5px;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#addBar {
  width: 100%;
  margin: 0;
}

#newListenerBar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.m {
  margin: 5px;
}

.el-dropdown-item {
  padding: 2px 6px 2px 6px; 
}
</style>
